import React, { PureComponent } from 'react'
import {
  BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
} from 'recharts'

export default class Example extends PureComponent {
  static jsfiddleUrl = 'https://jsfiddle.net/alidingling/9hjfkp73/'

  render() {
    const { data } = this.props
    const charData = data.map(pj => ({
      name: pj.name,
      进行中: parseInt(pj.task_count_object.in_progress),
      完成: parseInt(pj.task_count_object.done),
    }))
    return (
      <BarChart
        width={500}
        height={300}
        data={charData}
        style={{
          textAlign: 'center',
          display: 'inline-block',
        }}
        margin={{
          top: 20,
          right: 30,
          left: 20,
          bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Bar dataKey="进行中" stackId="a" fill="#5ca9e1" />
        <Bar dataKey="完成" stackId="a" fill="#21ba45" />
      </BarChart>
    )
  }
}
